<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <ul class="list">
            <li class="current"><img src="../5.7/1.PNG" alt=""  width="470" height="170"></li>
            <li><img src="../5.7/2.PNG" alt=""  width="470" height="170" ></li>
            <li><img src="../5.7/1.PNG" alt=""  width="470" height="170" ></li>
            <li><img src="../5.7/2.PNG" alt=""  width="470" height="170" ></li>
        </ul>
        <ul class="count">
            <li class="current">
                <p>1</p> 
            </li>
            <li>
                <p>2</p> 
            </li>
            <li>
                <p>3</p>
            </li>
            <li>
                <p>4</p>
            </li>
        </ul>
    </div>
</body>
<script>
    var obox = document.querySelector("#box")
    var uls = document.getElementsByTagName("ul")
    var img = uls[0].getElementsByTagName("li")
    var num = uls[1].getElementsByTagName("li")
    console.log(obox)
    console.log(uls)
    console.log(img)
    console.log(num)
    var timer = play = null
    var i = index = 0
    for (var i = 0; i < num.length; i++) {
        num[i].index = i
        num[i].onmouseover = function () {
            show(this.index)
        }
    }
    //鼠标滑过关闭自动播放
    obox.onmouseover = function () { clearInterval(play) }
    //鼠标离开自动播放 
    obox.onmouseout = function () {
        autoplay() //调用 
    }
    autoplay() 
    //自动播放 
    function autoplay() {
        play = setInterval(function () {
            index++ //下标加加
            index >= img.length && (index = 0)
            show(index)
        }, 1500)
    }
    //图片切换淡入淡出
    function show(a) {
        index = a
        var alpha = 0;
        for (var x in num) num[x].className = ''
        num[index].className = "current"
        clearInterval(timer) //清空定时器
        //透明变化
        for (var i = 0; i < img.length; i++) {
            img[i].style.opacity = 0
            img[i].style.filters = 'alpha(opacity=0)'
        }
        //但如淡出效果 
        timer = setInterval(function () {
            alpha += 2 
            alpha > 100 && (alpha = 100)
            img[index].style.opacity = alpha / 100
            img[index].style.filter = 'alpha(opacity=alpha)'
            alpha == 100 && clearInterval(timer)
        }, 100)
    }
</script>

</html>
<style lang="scss">
    * {
        padding: 0;
        margin: 0;
    } 
    #box{
        width: 470px;
        height: 220px;
        /* background-color: honeydew; */
        margin: 0 auto;
        position: relative;
    }
    #box .list{
        position: relative;
        width: 470px;
        height: 170px;
        overflow: hidden;
        border: 1px solid #ddd;
    }
    #box .list li{
         position: absolute;
         top: 0;
         left: 0;
         width: 470px;
         height: 170px;
         opacity: 0;
         filter: alpha(opacity=0);
    }
    #box .list li.current{
        opacity: 1; 
        filter: alpha(opacity=100); 
    }
    li{
        list-style: none;
    }
    #box .count{
        position: absolute;
        right: 0;
        bottom: 5px;
        overflow: hidden;
    }
    #box .count li{
         color: white;
         float: left;
         width: 20px;
         height: 20px;
         margin-right: 5px;
         background-color: orange;
         text-align: center;
         line-height: 20px;
         cursor: pointer;
         opacity: 0.7;
         filter: alpha(opacity=70);
         border-radius: 10px;
    }
    #box .count li.current{
        color:white;
        opacity: 1;
        filter: alpha(opacity=100);
        font-weight: 700px;
        background-color: orange;
    }

  
</style>